<template>
    <div class="warp">
        <div class="skin-bg" :style="{'background-image':`url(${skinList[skinIndex]?.url})`}"></div>
        <SearchVue class="search" @love="selectMusic(pagination.current)" @play="playMusic"></SearchVue>
        <div class="love">
            <div class="header">
                <img class="favor_bg" src="../assets/img/error_bg.jpg" />
                <div class="content">
                    <p class="title">
                        <span class="sing">我的歌单</span><br />
                        <span class="name">{{ newMusic.userInfo.username }}</span>
                        <router-link class="login" to="/login">{{ isLogin ? "切换账号" : "去登录！" }}</router-link>
                    </p>
                    <p class="desc">MGO音乐-听你想听</p>
                    <div>
                        <a-button @click="playMusic(0, favor.list)" shape="round" style="margin-right: 10px;">
                            <template #icon>
                                <icon-pause v-if="musicID.index >= 0" />
                                <icon-play-arrow v-else />
                            </template>
                            播放全部
                        </a-button>
                        <a-button shape="round" @click="isEditing = !isEditing">
                            <template #icon>
                                <icon-highlight />
                            </template>
                            {{ isEditing ? "取消编辑" : "高级编辑" }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="search" :class="{ 'search-show': isEditing }">
                    <a-space>
                        <a-button @click="updateShow(0)">
                            <template #icon>
                                <icon-plus />
                            </template>
                            添加歌曲
                        </a-button>
                        <a-button @click="deletes">
                            <template #icon>
                                <icon-delete />
                            </template>
                            批量删除
                        </a-button>
                    </a-space>

                    <a-space>
                        <a-select style="width:120px;" v-model="music.status" placeholder="筛选平台">
                            <a-option value="">全部</a-option>
                            <a-option value="netease">网易</a-option>
                            <a-option value="qq">ＱＱ</a-option>
                            <a-option value="kugou">酷狗</a-option>
                            <a-option value="kuwo">酷我</a-option>
                            <a-option value="migu">咪咕</a-option>
                        </a-select>
                        <a-input v-model="music.brandName" placeholder="输入歌名" allow-clear />
                        <a-input v-model="music.companyName" placeholder="输入作者" allow-clear />
                        <a-button @click="selectMusic(pagination.current = 1)">
                            <template #icon>
                                <icon-search />
                            </template>
                            筛选
                        </a-button>
                    </a-space>
                </div>
                <a-table class="musics" v-if="isLogin" row-key="id" :row-selection="rowSelection" :loading="loading"
                    page-position="bottom" :pagination="pagination" @page-change="selectMusic" :bordered="false"
                    :column-resizable="true" v-model:selectedKeys="selectedKeys" :columns="columns" :data="favor.list"
                    :hoverable="false" row-selection>
                    <template #brandName="{ record, rowIndex }">
                        <div class="brand-name">
                            <p class="text-line"><span class="label">{{ record.statusStr }}</span>
                            <p class="name">{{ record.brandName }}</p>
                            </p>
                            <div class="opear">
                                <a-button shape="round" style="margin-right: 10px;"
                                    @click="playMusic(rowIndex, favor.list)">
                                    <template #icon>
                                        <icon-pause
                                            v-if="(musicID.index == rowIndex) && (musicID.id == record.description)" />
                                        <icon-play-arrow v-else />
                                    </template>
                                </a-button>

                                <a-button @click="updateShow(1, record)" shape="round" style="margin-right: 10px;">
                                    <template #icon>
                                        <icon-edit />
                                    </template>
                                </a-button>
                                <a-button @click="deleteId(record.id)" shape="round" style="margin-right: 10px;">
                                    <template #icon>
                                        <icon-delete />
                                    </template>
                                </a-button>
                            </div>
                        </div>
                    </template>
                    <template #companyName="{ record, rowIndex }">
                        <p class="company-name text-line">{{ record.companyName }}</p>
                    </template>
                </a-table>
                <a-empty class="empty" v-else>
                    <template #image>
                        <icon-loading v-if="loading" />
                        <img src="../assets/empty.svg" v-else style="width: 30%;object-fit: contain;height: auto;" />
                    </template>
                    <a-button @click="goTo" shape="round">{{ loading ? "正在查询中……" : isLogin ? "没有数据，搜索一下" : "未登录，快去登录吧~"
                    }}
                    </a-button>
                </a-empty>
            </div>
        </div>
        <div id="simple">
        </div>
    </div>
    <a-modal v-model:visible="visible" :title="title" @ok="updateInfo">
        <a-form :model="newMusic.music">
            <a-form-item field="name" label="歌曲名称">
                <a-input v-model="newMusic.music.brandName" placeholder="输入歌曲名称" />
            </a-form-item>
            <a-form-item field="name" label="歌曲作者">
                <a-input v-model="newMusic.music.companyName" placeholder="输入歌曲作者" />
            </a-form-item>
            <a-form-item field="name" label="歌曲编号">
                <a-input v-model="newMusic.music.description" placeholder="输入歌曲编号" />
            </a-form-item>
            <a-form-item field="post" label="歌曲平台">
                <a-select style="width:120px;" v-model="newMusic.music.status" placeholder="筛选平台">
                    <a-option value="netease">网易</a-option>
                    <a-option value="qq">ＱＱ</a-option>
                    <a-option value="kugou">酷狗</a-option>
                    <a-option value="kuwo">酷我</a-option>
                    <a-option value="migu">咪咕</a-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script setup>
import { reactive, ref, nextTick, watch } from 'vue';
import SearchVue from '../components/Search.vue';
import { Message } from '@arco-design/web-vue';
import { useRouter, useRoute } from 'vue-router';
import ByMusic from "../player/index";
import { getUserInfo } from '../apis/user'
import { SwtichMusicUrl, selectAllMusic, deleteByIds, deleteById, updateMusic, addMusic } from "../apis/music"
import { skinList,skinIndex } from '../utils/skin';
const loading = ref(false)
const isEditing = ref(false)
const isLogin = ref(localStorage.getItem("token") != undefined)
const selectedKeys = ref([])
const visible = ref(false)
const router = useRouter()
const route = useRoute()
const title = ref("添加歌曲")
let token = localStorage.getItem("token");
//导航规则
const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10
})
//筛选条件
const music = reactive({
    status: '',
    brandName: '',
    companyName: '',
    id: "",
    ordered: "",
    description: ""
})
const musicID = reactive({
    index: -1,
    id: -1
})
const newMusic = reactive({
    type: 0,
    music: {
        status: '',
        brandName: '',
        companyName: '',
        id: "",
        ordered: "",
        description: ""
    },
    userInfo: {
        username: "MGO音乐"
    }
})
const favor = reactive({
    list: []
})
getUserInfo().then(res => {
    newMusic.userInfo = res.data
})
const selectMusic = (current) => {
    loading.value = true
    selectAllMusic(current, pagination.pageSize, music).then(res => {
        console.log(res)
        loading.value = false
        pagination.current = current
        pagination.total = res.data.totalCount
        favor.list = res.data.rows
    }).catch(err => {
        console.log(err)
        Message.warning(err.data.msg)
        loading.value = false
    })
}
const updateShow = (type, item) => {
    visible.value = true
    newMusic.type = type
    if (type == 0) {
        //添加
        title.value = "添加歌曲"
        newMusic.music = {}
    } else {
        //修改
        title.value = "修改歌曲"
        newMusic.music = item
    }
}
const updateInfo = () => {
    if (newMusic.type == 0) {
        addMusic(newMusic.music).then(res => {
            pagination.current = 1
            selectMusic(pagination.current)
        })
    } else {
        updateMusic(newMusic.music).then(res => {
            selectMusic(pagination.current)
        })
    }
}
const goTo = () => {
    if (!isLogin.value) {
        router.push({
            name: "Login"
        })
    }
}
selectMusic(pagination.current)

const deletes = () => {
    if (selectedKeys.value.length != 0) {
        deleteByIds(selectedKeys.value).then(res => {
            console.log(res)
            selectedKeys.value = []
            selectMusic(pagination.current)

        })
    } else {
        Message.warning("请选择后，在操作")
    }

}
const deleteId = (id) => {
    deleteById(id).then(res => {
        selectMusic(pagination.current)
    })
}
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    width: 0
});
const columns = [
    {
        title: '歌曲',
        dataIndex: 'brandName',
        slotName: "brandName"
    },
    {
        title: '歌手',
        dataIndex: 'companyName',
        width: 250,
        slotName: "companyName"

    },
];
ByMusic.$watch("current", (current) => {
    console.log("love", current)
    const item = ByMusic.list[current];
    if (current < 0 || (item?.url != undefined && (item?.url != ""))) {
        return
    }
    console.log("开始获取音乐")
    musicID.index = current
    musicID.id = item.music_id
    SwtichMusicUrl({
        input: item.type == 'migu' ? item.name : item.music_id,
        filter: item.type == 'migu' ? 'name' : 'id',
        type: item.type,
        page: "1"
    }).then(res => {
        console.log(res.data)
        if (!res.data[0]) {
            Message.warning("兄弟去冲个会员吧~~~")
            return
        }
        let index = 0;
        const list = res.data;
        for (let i = 0, len = list.length; i < len; i++) {
            const it = list[i]
            if (it.music_id = item.description) {
                index = i;
                break;
            }
        }
        console.log(res)
        ByMusic.list[current].url = list[index].url;
        ByMusic.list[current].lrc = list[index].lrc;
        ByMusic.list[current].cover = list[index].pic;
        ByMusic.jump(current);
    })
});
const playMusic = (index, list) => {
    let data = [];
    ByMusic.resetting();
    if (list.length == 0) {
        Message.warning("暂无音乐~")
        return
    }
    list.map((value) => {
        data.push({
            name: value.brandName,
            artist: value.companyName,
            url: value?.url,
            lrc: value.lrc,
            cover: value.pic,
            music_id: value.description,
            type: value.status,
        });
    });
    console.log(data)
    ByMusic.list = []
    ByMusic.addMusic(data);
    setTimeout(() => {
        ByMusic.jump(index)
    }, 100);
}
ByMusic.showMode("simple", false);
nextTick(() => {
    ByMusic.showMode("simple", true);
    ByMusic.routerLink = () => {
        router.push({
            name: 'MusicDetails'
        })
    }
    console.log("加载成功")
})
watch(() => route.name, (name, old) => {
    console.log("路由名称", old)
    const newToken = localStorage.getItem("token")
    if (old == 'Login' && (newToken != token)) {
        isLogin.value = true
        pagination.current = 1;
        token = newToken;
        ByMusic.resetting()
        getUserInfo().then(res => {
            newMusic.userInfo = res.data
        })
        selectMusic(1)
    }
})
//播放音乐
</script>
<style lang="less" scoped>
.warp {
    display: flex;
    position: relative;
    height: 100vh;
    overflow: hidden;

    .skin-bg {
        background-image: url(../assets/skin/76295.png);
        // background-image: url(../assets/skin/1593716.png);
        // filter: brightness(80%) saturate(130%) blur(40px);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        transition: all .5s;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        transform: scale(1.2);
        z-index: -1;
        
    }

   

    .love {
        z-index: 1;
        padding: 20px;
        flex: 1;
        overflow: auto;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 350px;
        right: 0;
        bottom: 92px;

        .header {
            display: flex;
            align-items: center;

            .favor_bg {
                width: 250px;
                height: 150px;
                border-radius: 10px;
            }

            .content {
                padding: 10px 20px;

                p {
                    margin-bottom: 10px;
                }

                .title {
                    font-size: 22px;
                    color: #fff;

                    span {
                        margin-bottom: 5px;
                        display: inline-block;
                    }

                    .sing {
                        font-family: "华文彩云";
                        font-size: 30px;
                        font-weight: bold;
                    }

                    .name {
                        color: var(--color-fill-2);
                        font-size: 18px;
                    }

                    .login {
                        color: var(--color-fill-3);
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }

                .desc {
                    font-size: 14px;
                    color: var(--color-fill-3);
                    margin-bottom: 15px;
                }
            }
        }

        .body {
            .search {
                display: flex;
                justify-content: space-between;
                height: 0px;
                transition: all .3s;
                overflow: hidden;
                margin: 10px 0;

            }

            .search-show {
                height: 32px;
            }

            .musics {
                .arco-table-tr {
                    &:hover {
                        .opear {
                            width: 126px;
                        }
                    }
                }

                ::v-deep(.arco-table-th) {
                    background: transparent;
                    color: var(--color-fill-2);
                    font-size: 14px;
                }

                ::v-deep(.arco-table-td) {
                    background: transparent;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
                }

                ::v-deep(.arco-pagination-item) {
                    color: var(--color-text-3);
                }


                ::v-deep(.arco-table-tr:hover .arco-table-td) {
                    background-color: rgba(0, 0, 0, 10%);
                }
                
                ::v-deep(.arco-spin-mask) {
                    background-color: rgba(255 ,255, 255 , 8%);
                    border-radius: 5px;
                }

                .brand-name {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff;
                    height: 40px;
                    font-size: 15px;

                    .text-line {
                        display: flex;
                        align-items: center;

                        .name {
                            max-width: 300px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                    }

                    .label {
                        font-size: 12px;
                        color: #fff;
                        background-color: var(--color-text-5);
                        text-align: center;
                        border-radius: 3px;
                        display: inline-block;
                        margin-right: 5px;
                        font-family: "华文彩云";
                        vertical-align: middle;

                        /*设置字体*/
                    }

                    .opear {
                        display: flex;
                        width: 0;
                        overflow: hidden;
                        transition: all .7s;
                    }

                }

                .company-name {
                    width: 250px;
                    color: #fff;
                    font-size: 14px;
                }

                .text-line {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }

    #simple {
        position: fixed;
        bottom: 0;
        left: 350px;
        right: 0;
        z-index: 9;
        padding: 0 10px;
    }
}
</style>